<html>
    <head>
        <%= require('../../view/common/head.htm') %>
    </head>

    <body>
        <%= require('../../view/common/header.htm') %>

    <div id="Content">
        <div id="Welcome">
            <div id="WelcomeContent">
                Welcome to MyPetStore!
            </div>
        </div>

        <div id="Main">
            <div id="Sidebar">
                <div id="SidebarContent">
                    <a href="../catalog/catalog-list.html?categoryId=FISH&route=product"><img src="<%= require('../../images/fish_icon.gif')%>" /></a>
                    <br/> Saltwater, Freshwater <br/>
                    <a href="../catalog/catalog-list.html?categoryId=DOGS&route=product"><img src="<%= require('../../images/dogs_icon.gif')%>" /></a>
                    <br /> Various Breeds <br />
                    <a href="../catalog/catalog-list.html?categoryId=CATS&route=product"><img src="<%= require('../../images/cats_icon.gif')%>"  /></a>
                    <br /> Various Breeds, Exotic Varieties <br />
                    <a href="../catalog/catalog-list.html?categoryId=REPTILES&route=product"><img src="<%= require('../../images/reptiles_icon.gif')%>"  /></a>
                    <br /> Lizards, Turtles, Snakes <br />
                    <a href="../catalog/catalog-list.html?categoryId=BIRDS&route=product"><img src="<%= require('../../images/birds_icon.gif')%>"  /></a>
                    <br /> Exotic Varieties
                </div>
            </div>

            <div id="MainImage">
                <div id="MainImageContent">
                    <map name="estoremap">
                        <area id="Birds1" alt="Birds" coords="72,2,280,250" href="../catalog/catalog-list.html?categoryId=BIRDS&route=product" shape="rect"/>
                        <area id="Fish" alt="Fish" coords="2,180,72,250" href="../catalog/catalog-list.html?categoryId=FISH&route=product" shape="rect" />
                        <area id="Dogs" alt="Dogs" coords="60,250,130,320" href="../catalog/catalog-list.html?categoryId=DOGS&route=product" shape="rect" />
                        <area id="Reptiles" alt="Reptiles" coords="140,270,210,340" href="../catalog/catalog-list.html?categoryId=REPTILES&route=product" shape="rect" />
                        <area id="Cats" alt="Cats" coords="225,240,295,310" href="../catalog/catalog-list.html?categoryId=CATS&route=product" shape="rect" />
                        <area id="Birds2" alt="Birds" coords="280,180,350,250" href="../catalog/catalog-list.html?categoryId=BIRDS&route=product" shape="rect" />
                    </map>
                    <img height="355" src="<%= require('../../images/splash.gif')%>" align="middle" usemap="#estoremap" width="350" />
                </div>
            </div>
            <div id="Separator">&nbsp;</div>
        </div>
    </div>

    <%= require('../../view/common/footer.htm') %>
    </body>
</html>